.my-account-well {
  position: relative;
  .flexbox();
  width: 100%;
  height: (140/@font-size-base)*1rem;
  background: @white;
  .justify-content(center);
  .align-items(center);
  box-sizing: border-box;
  padding: (15/@font-size-base)*1rem;
  .hairline(bottom, #e1e1e1);
  span {
    font-size: (28/@font-size-base)*1rem;
    color: #333;
  }
}

.recharge {


  .recharge-title {
    box-sizing: border-box;
    margin: (10/@font-size-base)*1rem 0;
    font-size: (18/@font-size-base*1rem);
    padding: 0 (15/@font-size-base)*1rem;
    em {
      font-style: normal;
      font-size: (14/@font-size-base)*1rem;
      color: #898989;
    }
  }

  .recharge-content {
    box-sizing: border-box;
    padding: 0 (15/@font-size-base)*1rem;

    .row.mt-15 {
      margin-top: 15px;
    }
  }

  .recharge-item {
    .flexbox();
    .justify-content(center);
    .align-items(center);
    width: 100%;
    height: (50/@font-size-base)*1rem;
    border: 1px solid #FE7F2F;
    font-size: (18/@font-size-base)*1rem;
    color: #FE7F2F;
    &.active {
      background: #FE7F2F;
      color: @white;
    }
  }

  .recharge-com {
    width: 100%;
    text-align: center;
    color: #FE7F2F;
    font-size: (18/@font-size-base)*1rem;
    margin-top: (5/@font-size-base)*1rem;
  }

  .recharge-button {
    margin-top: (30/@font-size-base)*1rem;
    .flexbox();
    padding: 0 (15/@font-size-base)*1rem;
    .button {
      width: 100%;
      height: (40/@font-size-base)*1rem;
      line-height: (40/@font-size-base)*1rem;
      font-size: (16/@font-size-base)*1rem;
      background: #FE7F2F;
      border-color: #FE7F2F;
      color: #fff;
      border-radius: 0;
      &:active,
      &.active-state {
        opacity: 0.85;
      }
    }
  }

}